<html>
<script type="text/javascript" src="../dojo.js"></script>
<script type="text/javascript">
dojo.require('dojo.html.common');
dojo.require('dojo.html.style');
dojo.require("dojo.event");
dojo.require("dojo.lang.declare");

function $ (id) { return dojo.byId(id); }
function makeGreen (nodes) { for (var i = 0; node = nodes[i]; i++) { node.style.color = "green"; } }


var contentWin;
dojo.addOnLoad(function(){
	contentWin = $("embed").contentWindow;
	dojo.event.connect($("updateScroll"), "onclick", updateScroll);
	dojo.event.connect($("updateScrollOffset"), "onclick", updateScrollOffset);
	dojo.event.connect($("updateViewport"), "onclick", updateViewport);
	dojo.event.connect($("init"), "onclick", init);
});

function updateScroll() {
	dojo.withGlobal(contentWin, function() {
		var scroll = dojo.html.getScroll();
		$("scrollTop").firstChild.nodeValue = scroll.top;
		$("scrollLeft").firstChild.nodeValue = scroll.left;
	});
}

function updateScrollOffset() {
	dojo.withGlobal(contentWin, function() {
		var offset = dojo.html.getScroll().offset;
		$("scrollOffsetX").firstChild.nodeValue = offset.x;
		$("scrollOffsetY").firstChild.nodeValue = offset.y;
	});
}

//use object context to invoke a member function of an object
var ViewPort = {};
ViewPort.update = function(msg){
	var viewport = dojo.html.getViewport();
	$("viewportWidth").firstChild.nodeValue = viewport.width;
	$("viewportHeight").firstChild.nodeValue = viewport.height;
	$("viewportSize").firstChild.nodeValue = viewport + msg;
}

function updateViewport() {
	dojo.withGlobal(contentWin, "update", ViewPort, " updateViewport is clicked" );
}

function init() {
	makeGreen(dojo.html.getElementsByClass("foo1 bar1"));
	makeGreen(dojo.html.getElementsByClass("foo2", null, null, dojo.html.classMatchType.ContainsAll));
	makeGreen(dojo.html.getElementsByClass("foo3 bar3", null, null, dojo.html.classMatchType.IsOnly));
	makeGreen(dojo.html.getElementsByClass("foo4", null, null, dojo.html.classMatchType.IsOnly));
}

//use around to wrap a function to work in the embed window
dojo.event.connect("around", this, "init", this, "withEmbed");
function withEmbed(mi) {
	dojo.withGlobal(contentWin, function() { mi.proceed(); });
}

</script>
<head>
</head>
<body>
<p>This text is before the iframe</p>
<iframe id="embed" src="test_html_content.html" width="50%" height="200px"></iframe>
<p><input type="button" id="init" value="Init green text">
<input type="button" id="updateScroll" value="Update Scroll Values">
<input type="button" id="updateScrollOffset" value="Update Scroll Values">
<input type="button" id="updateViewport" value="Update Size Values"></p>
<p style="height: 700px"></p>
</body>
</html>
